<template>  
  <view class="container">  
    <view v-for="(item, index) in data" :key="index" class="card" @click="item.isSelected = !item.isSelected">  
      <view>  
        <h4 class="name">{{item.name}}</h4>  
        <div class="leader-info">  
          <h4>团长：{{item.leader}}</h4>  
          <h4>人数：{{item.number}}/60</h4>  
        </div>  
      </view>  
      <view class="select-button-container">  
        <image :src="item.isSelected ? '../../static/tabs/unchecked-icon.png' : '../../static/tabs/checked-icon.png'" class="select-button" mode="aspectFit" />  
      </view>  
    </view>
	<button class="button">提交选择结果</button>
  </view>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      data:[  
        {  
          name:'羽毛球01团',  
          leader:'李四',  
          number: 40,  
          isSelected: false // 添加 isSelected 属性  
        },  
        {  
          name:'羽毛球02团',  
          leader:'张三',  
          number: 50,  
          isSelected: false // 添加 isSelected 属性  
        },  
      ]  
    }  
  },  
  methods: {  
    // ... 其他方法  
  },  
  onLoad() {  
    uni.setNavigationBarTitle({  
      title: '匹配选择'    
    });  
  }  
}  
</script>  
  
<style>  
.card {  
  width: 300px;  
  height: 120px;  
  background-color: white;  
  margin-top: 40rpx;  
  margin-left: 80rpx;  
  display: flex;  
  flex-direction: row; /* 改为行方向，以便按钮显示在右边 */  
  justify-content: space-between;  
  align-items: center; /* 水平居中 */  
  padding: 10px;  
  position: relative; /* 以便按钮可以相对于卡片定位 */  
}  
  
.name {  
  font-weight: bold;  
  font-size: 24px;  
  color: black;  
  margin: 0;  
}  
  
.leader-info {  
  display: flex;  
  flex-direction: column;  
  justify-content: center;  
}  
  
.leader-info h4 {  
  color: #888;  
  margin: 0;  
  margin-top: 20rpx;  
}  
  
.select-button-container {  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  width: 30px; /* 你可以根据需要调整按钮的大小 */  
  height: 30px;  
}  
  
.select-button {  
  width: 100%;  
  height: 100%;  
}  
  
.container {  
  background-color: #FFFAFA; 
  height: 100vh;  
} 
 .button{
 	margin-top: 140rpx;
 	margin-left: 270rpx;
 	background-color: #FFDF00;
 	width: 200rpx;
 	height: 66rpx;
 	text-align: center;
 	line-height: 170%;	
 }
</style>